<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    
    <title>项目管理系统</title>
    <link rel="stylesheet" href="css/bootstrap.min.css" />
	<style type="text/css">

	</style>

  </head>
  
  <body>&nbsp;  
    <%@ include file="top.jsp" %>
    <div class="container" style="margin-top:60px;">
		<legend>修改个人资料</legend>
		<div class="row">
			<div class="span4">
				<legend>修改头像</legend>	
				<c:choose>
					<c:when test="${param.code == 10001 }">
						<div style="color:red;font-size:18px">该图片太大请重新选择</div>
					</c:when>
					<c:when test="${param.code == 10002 }">
						<div style="color:red;font-size:18px">请选择正确的图片格式</div>
					</c:when>
				</c:choose>			
				<img src="img.jspx?img=${sessionScope.user.pic}"  height="250px" width="250px">
				<div>仅支持JPG、GIF、BMP、PNG图片文件，且文件小于1M</div>
				
				<form action="img.jspx" method="post" id="imgform" enctype="multipart/form-data">
					<input type="hidden" name="username" value="${sessionScope.user.username }">
					<input type="hidden" name="password" value="${sessionScope.user.password }">
					<input type="file" name="image" id="image"/><br/>
					<span style="color:red" id="image-msg"></span><br/>
					<input type="button" id="btnImg" value="上传"/>
				</form>	
			</div>
			
			<div class="span7"  style="min-height:400px;border-left:1px solid #ccc;padding-left:15px">
				<form class="form-horizontal" action="main.jspx?m=editUser" method="post" id="myform">
				<fieldset>
					<legend>修改个人信息</legend>
					<div class="control-group">
						<label class="control-label" for="input01">新账户名</label>				
						<div class="controls">
							<input type="text" class="span3" name="username" id="username" style="height:28px"/>
							<span style="color:red" id="name-msg"></span><br/>
						</div>
					</div>
					<div class="control-group">
						<label class="control-label" >当前密码</label>				
						<div class="controls">
							<input type="password" class="span3" name="pwd1" id="pwd1" style="height:28px"/>
							<span style="color:red" id="pwd1-msg"></span><br/>
						</div>
					</div>
					<div class="control-group">
						<label class="control-label" >新密码</label>				
						<div class="controls">
							<input type="password" class="span3" name="pwd2" id="pwd2" style="height:28px"/>
							<span style="color:red" id="pwd2-msg"></span><br/>
						</div>
					</div>
					<div class="control-group">
						<label class="control-label" >确认密码</label>				
						<div class="controls">
							<input type="password" class="span3" name="pwd3" id="pwd3" style="height:28px"/>
							<span style="color:red" id="pwd3-msg"></span><br/>
						</div>
					</div>
					<input type="hidden" name="id" value="${sessionScope.user.id }"/><br><br>
					<input type="hidden" name="pic" value="${sessionScope.user.pic }"/><br><br>
					<div class="form-actions">
						<button type="button"  id="btnSubmit" class="btn btn-primary">保存</button>
                        <a class="btn" href="main.jspx?m=editUser">重置</a>
					</div>
				</fieldset>
				</form>
			</div>	
		</div>	
	</div>	
	<script type="text/javascript">
		var xmlHttp;   	
    	function createXMlHttpRequest() {
    		if(window.ActiveXObject) {
        		xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
        	} else {
        		xmlHttp = new XMLHttpRequest();
        	}
    	}
		//获取Image值并判断是否为空
		function validateImage() {
			var image = document.getElementById("image").value;
			if(image.trim().length == 0) {
				return false;
			}
			return true;
		}	
		document.getElementById("btnImg").onclick = function() { 		
    		var result = validateImage();		
			if(!result) {
			    //Image为空
				document.getElementById("image-msg").innerHTML = "×请选择上传的文件";
			} else {
				//image存在
				document.getElementById("imgform").submit();
			}
    	};
			
		//获取username值并判断是否为空
		function validateName() {
			var name = document.getElementById("username").value;
			if(name.trim().length == 0) {
				return false;
			}
			return true;
		}
		document.getElementById("username").onblur = function() {
    		createXMlHttpRequest();  		
    		var result = validateName();
			//当username不为空
			if(result) {
				document.getElementById("name-msg").innerHTML = "√";
			}
			//username为空时
			if(!result) {
			    //当username失去焦点
				document.getElementById("name-msg").innerHTML = "×用户名不能为空";
			}
    	};
    	//当username获得焦点，提示信息消失
    	document.getElementById("username").onkeyup = function(){
			document.getElementById("name-msg").innerHTML = "";
		};
			
		document.getElementById("pwd1").onblur = function() {
    		createXMlHttpRequest();   		
    		var pwd1 = document.getElementById("pwd1").value;

    		xmlHttp.open("post", "main.jspx?m=ajax");
    		xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    		xmlHttp.onreadystatechange = callback;
    		xmlHttp.send("pwd1="+pwd1);
    	};
    	
    	function callback() {
    		if(xmlHttp.readyState == 4) {
    			if(xmlHttp.status == 200) {
    				var value = xmlHttp.responseText;
    				if(value == "no") {
    					document.getElementById("pwd1-msg").innerHTML = "×密码不正确";
    				} else {
    					document.getElementById("pwd1-msg").innerHTML = "√";
    				}
    			} else {
    				alert("服务器暂时不可用，请稍后再试" + xmlHttp.status);
    			}
    		} else {
    			//loading
    			document.getElementById("pwd1-msg").innerHTML = "验证中...";
    		}
    	}
    	
    	
    	
    	
    	
    	//新密码pwd2的验证
    	function validatePwd2() {
			var pwd2 = document.getElementById("pwd2").value;
			if(pwd2.trim().length == 0) {
				return false;
			}
			return true;
		}
    	document.getElementById("pwd2").onblur = function() {
    		createXMlHttpRequest();  		
    		var result = validatePwd2();
			//当pwd2不为空
			if(result) {
				document.getElementById("pwd2-msg").innerHTML = "√";
			}
			//pwd2为空时
			if(!result) {
			    //当pwd2失去焦点
				document.getElementById("pwd2-msg").innerHTML = "×密码不能为空";
			}
    	};
    	//当pwd2获得焦点，提示信息消失
    	document.getElementById("pwd2").onkeyup = function(){
			document.getElementById("pwd2-msg").innerHTML = "";
		};
		
		//新密码pwd3与pwd2的验证
    	function validatePwd3() {
			var pwd3 = document.getElementById("pwd3").value;
			var pwd2 = document.getElementById("pwd2").value;
			if(!(pwd2 == pwd3) || pwd3.trim().length == 0) {
				return false;
			}
			return true;
		}
    	document.getElementById("pwd3").onblur = function() {
    		createXMlHttpRequest();  		
    		var result = validatePwd3();
			//当pwd3与pwd2不相同时
			if(!result) {
				document.getElementById("pwd3-msg").innerHTML = "×两次密码不相同";
			}
			
			if(result) {
			    //当pwd3与pwd2相同时
				document.getElementById("pwd3-msg").innerHTML = "√";
			}
    	};
    	//当pwd3获得焦点，提示信息消失
    	document.getElementById("pwd3").onkeyup = function(){
			document.getElementById("pwd3-msg").innerHTML = "";
		};
		//表单提交
		document.getElementById("btnSubmit").onclick = function (){	
			//通过button按钮来提及表单
			if(validateName()&&validatePwd2()&&validatePwd3()) {
				document.getElementById("myform").submit();
			} else {
			//若果上述三个条件不成立则不能提交表单button
				document.getElementById("myform").button();
			}		
		};
	</script>
  </body>
</html>
